<template>
	<view class="mainPage" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title"></public-head>
		<view>
			<u-field v-model="address" label="医院地址:" placeholder="请选择医院区域" :disabled="true" right-icon="arrow-right" @click="selectAddress"></u-field>
			<u-field v-model="detailed" label="详细地址:" placeholder="如道路、门牌号、小区、楼栋号、单元室等"></u-field>
		</view>
		<view class="but">
			<button>保存</button>
		</view>
		<itmister-address-picker ref="addressEl" @confirmChange="confirmChange"></itmister-address-picker>
	</view>
</template>
<script>
import itmisterAddressPicker from '@/components/itmister-address-picker/itmister-address-picker.nvue'
import publicHead from "@/components/publicHead/publicHead.vue"
export default {
	components: {
		publicHead,
		itmisterAddressPicker
	},
	data() {
		return {
			title: "医院地址",
			address: '',
			detailed: ''
		}
	},
	methods: {
		// 打开窗口
		selectAddress() {
			this.$refs.addressEl.show();
		},
		// 确认选中
		confirmChange(address) {
			this.address = address.province + '/' + address.city + '/' + address.area;
		}
	}
}
</script>
<style scoped lang="scss">
.but {
	width: 100%;
	margin-top: 50px;
	button {
		width: 90%;
		background: #fe7600;
		color: #ffffff;
	}
}
</style>
